<template>
  <div class="img1">
    <div class="box">
      <div class="des">
        <div class="modelName">Model 3</div>
        <div class="booking">预约试驾</div>
      </div>

      <el-row class="button">
        <el-button type="info" class="buttonDetail b1">定制我的 Model 3</el-button>
        <el-button class="buttonDetail b2">了解 Model 3</el-button>
      </el-row>
    </div>
  </div>
  <div class="img2">
    <div class="box">
      <div class="des">
        <div class="modelName">Model Y</div>
        <div class="booking">预约试驾</div>
      </div>

      <el-row class="button">
        <el-button type="info" class="buttonDetail b1">定制我的 Model Y</el-button>
        <el-button class="buttonDetail b2">了解 Model Y</el-button>
      </el-row>
    </div>
  </div>
  <div class="img3">
    <div class="box">
      <div class="des">
        <div class="modelName">Model S</div>
        <div class="booking">预约试驾</div>
      </div>

      <el-row class="button">
        <el-button type="info" class="buttonDetail b1">定制我的 Model S</el-button>
        <el-button class="buttonDetail b2">了解 Model S</el-button>
      </el-row>
    </div>
  </div>
  <div class="img4">
    <div class="box">
      <div class="des">
        <div class="modelName">Model X</div>
        <div class="booking">预约试驾</div>
      </div>

      <el-row class="button">
        <el-button type="info" class="buttonDetail b1">定制我的 Model X</el-button>
        <el-button class="buttonDetail b2">了解 Model X</el-button>
      </el-row>
    </div>
  </div>
  <div class="img5">
    <div class="box">
      <div class="des">
        <div class="modelName">太阳能设备和 Powerwall</div>
        <div class="booking">全方位能源供应</div>
      </div>

      <el-row class="button">
        <el-button type="info" class="buttonDetail b1">了解更多</el-button>
      </el-row>
    </div>
  </div>
  <div class="img6">
    <div class="box">
      <div class="des">
        <div class="modelName">充电产品和精品配件</div>
      </div>

      <el-row class="button">
        <el-button type="info" class="buttonDetail b1">立即购买</el-button>
      </el-row>
    </div>

    <div class="botton">
      Tesla © 2022
      沪ICP备2021004806号-1
      沪公网安备 31011502017892 号
      营业执照
      隐私和法律
      联系我们
      工作机会
      最新消息
    </div>
  </div>
</template>
  
<script>
export default {
  setup() {
    const change = function() {};

    return;
  }
};
</script>
  
  <style lang="less" scoped>
.img1 {
  text-align: center;
  width: 100%;
  height: 100%;
  background: url("https://tesla-cdn.thron.com/delivery/public/image/tesla/20bf4269-45ae-4473-8133-00c144d7265b/bvlatuR/std/2880x1800/Homepage-Model-3-Hero-Desktop-CN?quality=auto-medium&format=auto");
  background-size: 100% 135%;
  background-position: 0px -130px;
  .box {
    opacity: 100%;
    .des {
      padding-top: 130px;
      .modelName {
        font-size: 33px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 580;
      }
      .booking {
        margin-top: 10px;
        text-align: center;
      }
    }

    .button {
      margin-top: 370px;
      display: flex;
      justify-content: center;
      .buttonDetail {
        width: 250px;
        height: 38px;
      }
      .b1 {
        background: #23281d;
      }
      .b2 {
        color: #3e4045;
      }
    }
  }
}
.img2 {
  text-align: center;
  width: 100%;
  height: 100%;
  background: url("https://tesla-cdn.thron.cn/delivery/public/image/tesla/6eaf68ac-240a-4aa7-8500-05918f77927b/bvlatuR/std/0x0/6eaf68ac-240a-4aa7-8500-05918f77927b");
  background-size: 100% 130%;
  background-position: 0px -130px;
  .box {
    opacity: 100%;
    .des {
      padding-top: 130px;
      .modelName {
        font-size: 33px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 580;
      }
      .booking {
        margin-top: 10px;
        text-align: center;
      }
    }

    .button {
      margin-top: 370px;
      display: flex;
      justify-content: center;
      .buttonDetail {
        width: 250px;
        height: 38px;
      }
      .b1 {
        background: #23281d;
      }
      .b2 {
        color: #3e4045;
      }
    }
  }
}
.img3 {
  text-align: center;
  width: 100%;
  height: 100%;
  background: url("https://tesla-cdn.thron.com/delivery/public/image/tesla/538ac149-d103-4834-9d38-641d8ae447ef/bvlatuR/std/4096x2560/Homepage-Model-S-Desktop-LHD");
  background-size: 100% 140%;
  background-position: 0px -140px;
  .box {
    opacity: 100%;
    .des {
      padding-top: 130px;
      .modelName {
        font-size: 33px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 580;
      }
      .booking {
        margin-top: 10px;
        text-align: center;
      }
    }

    .button {
      margin-top: 370px;
      display: flex;
      justify-content: center;
      .buttonDetail {
        width: 250px;
        height: 38px;
      }
      .b1 {
        background: #23281d;
      }
      .b2 {
        color: #3e4045;
      }
    }
  }
}
.img4 {
  text-align: center;
  width: 100%;
  height: 100%;
  background: url("https://tesla-cdn.thron.com/delivery/public/image/tesla/ddc135ed-1638-40fb-8ab1-f8045059ecef/bvlatuR/std/4096x2560/Homepage-Model-X-Desktop-LHD");
  background-size: 100% 130%;
  background-position: 0px -140px;
  .box {
    opacity: 100%;
    .des {
      padding-top: 130px;
      .modelName {
        font-size: 33px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 580;
      }
      .booking {
        margin-top: 10px;
        text-align: center;
      }
    }

    .button {
      margin-top: 370px;
      display: flex;
      justify-content: center;
      .buttonDetail {
        width: 250px;
        height: 38px;
      }
      .b1 {
        background: #23281d;
      }
      .b2 {
        color: #3e4045;
      }
    }
  }
}
.img5 {
  text-align: center;
  width: 100%;
  height: 100%;
  background: url("https://tesla-cdn.thron.cn/delivery/public/image/tesla/27d0055c-b0bf-476c-b3aa-ec59d314f871/bvlatuR/std/0x0/27d0055c-b0bf-476c-b3aa-ec59d314f871");
  background-size: 100% 180%;
  background-position: 0px -250px;
  .box {
    opacity: 100%;
    .des {
      padding-top: 130px;
      .modelName {
        font-size: 33px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 580;
      }
      .booking {
        margin-top: 10px;
        text-align: center;
      }
    }

    .button {
      margin-top: 370px;
      display: flex;
      justify-content: center;
      .buttonDetail {
        width: 250px;
        height: 38px;
      }
      .b1 {
        background: #23281d;
      }
      .b2 {
        color: #3e4045;
      }
    }
  }
}
.img6 {
  text-align: center;
  width: 100%;
  height: 100%;
  background: url("https://tesla-cdn.thron.cn/delivery/public/image/tesla/dd739764-bcaa-4263-9488-8c73bc9fb046/bvlatuR/std/0x0/dd739764-bcaa-4263-9488-8c73bc9fb046");
  background-position: 0px -140px;
  background-size: 100% 140%;
  .box {
    opacity: 100%;
    .des {
      padding-top: 130px;
      .modelName {
        font-size: 33px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-weight: 580;
      }
      .booking {
        margin-top: 10px;
        text-align: center;
      }
    }

    .button {
      margin-top: 370px;
      display: flex;
      justify-content: center;
      .buttonDetail {
        width: 250px;
        height: 38px;
      }
      .b1 {
        background: #23281d;
      }
      .b2 {
        color: #3e4045;
      }
    }
  }
  .botton{
    margin-top: 100px;
  }
}
</style>